<template>

  <div>
    <div class="recharge-hd">
      <span>提现管理</span>
    </div>
    <div class="relboxmain">
      <div class="bankCard " @click="bankCard" v-if="!realprovesName.bankAccount">
        <div class="bankbind">
          <p class="el-icon-plus"></p>
          <p>绑定银行卡</p>
        </div>

      </div>
      <div class="bankCard " @click="bankCardAli" v-if="!realprovesName.aliName">
        <div class="bankbind">
          <p class="el-icon-plus"></p>
          <p>绑定支付宝账户</p>
        </div>

      </div>
      <div class="bankCard" v-if="realprovesName.bankAccount">
        <div class="bankCardInfo">
          <p>{{bankName(realprovesName.bankCode)}}</p>
          <p>{{realprovesName.userName}}</p>
          <p>{{ realprovesName.bankAccount }}</p>
        </div>
        <div class="bankUp">
          <el-button size="mini" style=" margin-top: 80px;" :loading='loading' @click="dialogTableVisible=true" type="danger">修改银行卡</el-button>
        </div>
      </div>
      <div class="bankCard" v-if="realprovesName.aliName">
        <div class="bankCardInfo">
          <p>支付宝账号</p>
          <p>{{realprovesName.userName}}</p>
          <p>{{ realprovesName.aliName }}</p>
        </div>
        <div class="bankUp">
          <el-button size="mini" style=" margin-top: 80px;" :loading='loading' @click="isAliDialogTableVisible=true" type="danger">修改支付宝账号</el-button>
        </div>
      </div>
      <div><i class="el-icon-warning" style="color: #e6a23c;"></i>提现无笔数限制 单笔提现服务费1元/笔</div>
    </div>
    <div class="indent">
      <el-table :header-cell-style="{background:'#FAFAFA',color:'#001013',fontWeight:'bold'}" v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column prop="updateTime" label="提现时间" />
        <el-table-column prop="allMoney" label="提现金额" />
        <el-table-column prop="royaltyMoney" label="提现服务费" />
        <el-table-column prop="payMoney" label="实际到账金额" />
        <el-table-column prop="orderStatus" width="80" label="打款状态">
          <template slot-scope="scope">
            {{scope.row.status==101?'未审核':''}}
            {{scope.row.status==102?'等待打款':''}}
            {{scope.row.status==103?'打款成功':''}}
            {{scope.row.status==104?'打款失败':''}}
          </template>
        </el-table-column>

      </el-table>
      <el-pagination background layout="prev, pager, next,sizes,total" v-if="total>0" :total='total' @current-change='current_change' @size-change='size_change' style="text-align: center;  margin-top: 60px;" :page-sizes="[10, 50, 100, 1000]">
      </el-pagination>
    </div>

    <el-dialog width="650px" title="绑定银行卡" :close-on-click-modal="false" :visible.sync="dialogTableVisible">
      <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="100px" v-loading='loading'>
        <el-form-item label="姓名：">{{realprovesName.userName}}</el-form-item>
        <el-form-item label="选择银行：" prop="bankCode">
          <el-select v-model="ruleForm.bankCode" filterable placeholder="请选择">
            <el-option v-for="item in bankListL" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户行省：" prop="bankProvince">
          <el-select v-model="ruleForm.bankProvince" @change="bindProvince" filterable placeholder="请选择">
            <el-option v-for="item in provinceList" :key="item.code" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户行市：" prop="bankCity">
          <el-select v-model="ruleForm.bankCity" filterable placeholder="请选择">
            <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="银行卡号：" prop="bankAccount">
          <el-input v-model="ruleForm.bankAccount" @input="ruleForm.bankAccount=ruleForm.bankAccount.replace(/[^\d]/g,'')" />
        </el-form-item>
        <el-form-item label="开户支行：" prop="bankSubname">
          <el-input v-model="ruleForm.bankSubname" />
        </el-form-item>
        <el-form-item label="提现密码：" prop="bankPass">
          <el-input v-model="ruleForm.bankPass" show-password />
        </el-form-item>
        <el-form-item>
          <el-button style="width:150px" :loading='loading' @click="handlePublish" type="danger">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog width="650px" title="绑定支付宝账号" :close-on-click-modal="false" :visible.sync="isAliDialogTableVisible">
      <el-form :rules="rulesAli" ref="ruleFormAli" :model="ruleFormAli" label-width="120px" v-loading='loading'>
        <el-form-item label="姓名：">{{realprovesName.userName}}</el-form-item>
        <el-form-item label="支付宝账号：" prop="alinum">
          <el-input v-model="ruleFormAli.alinum" />
          <b style="color: #e6a23c;" class="el-icon-warning">请务必核实支付宝账号正确性</b>
        </el-form-item>
        <el-form-item label="提现密码：" prop="bankPass">
          <el-input v-model="ruleFormAli.bankPass" show-password />
        </el-form-item>
        <el-form-item>
          <el-button style="width:150px" :loading='loading' @click="handleAliPublish" type="danger">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'withdraw',
  data () {
    return {
      realprovesName: '',
      tableData: [],
      total: 0,
      page: 1,
      limit: 10,
      dialogTableVisible: false,
      isAliDialogTableVisible: false,
      loading: false,
      provinceList: [], // 省
      cityList: [], // 市
      cityListOld: [],
      bankListL: [
        { id: 1, name: '工商银行' },
        { id: 3, name: '农业银行' },
        { id: 2, name: '建设银行' },
        { id: 5, name: '中国银行' },
        { id: 7, name: '招商银行' },
        { id: 33, name: '北京银行' },
        { id: 6, name: '交通银行' },
        { id: 13, name: '兴业银行' },
        { id: 65, name: '南京银行' },
        { id: 14, name: '民生银行' },
        { id: 8, name: '光大银行' },
        { id: 18, name: '平安银行' },
        { id: 67, name: '渤海银行' },
        { id: 66, name: '东亚银行' },
        { id: 17, name: '宁波银行' },
        { id: 12, name: '中信银行' },
        { id: 11, name: '广发银行' },
        { id: 16, name: '上海银行' },
        { id: 9, name: '上海浦东发展银行' },
        { id: 4, name: '中国邮政' },
        { id: 10, name: '华夏银行' },
        { id: 68, name: '北京农村商业银行' }
      ],
      rules: {
        bankAccount: [
          { required: true, message: '请填写银行卡号', trigger: 'blur' }
        ],
        bankProvince: [
          { required: true, message: '请选择省', trigger: 'change' }
        ],
        bankCity: [{ required: true, message: '请选择市', trigger: 'change' }],
        bankSubname: [
          { required: true, message: '请填写开户支行', trigger: 'blur' }
        ],
        bankCode: [
          { required: true, message: '请选择银行', trigger: 'change' }
        ],
        bankPass: [
          {
            required: true,
            message: '请输入提现密码'
          },
          {
            validator: function (rule, value, callback) {
              var reg = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|[\s]/g
              if (reg.test(value)) {
                callback(new Error('提现密码不能包含汉字和空格'))
              } else {
                callback()
              }
            }
          }
        ]
      },
      rulesAli: {
        bankPass: [
          {
            required: true,
            message: '请输入提现密码'
          },
          {
            validator: function (rule, value, callback) {
              var reg = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|[\s]/g
              if (reg.test(value)) {
                callback(new Error('提现密码不能包含汉字和空格'))
              } else {
                callback()
              }
            }
          }
        ],
        alinum: [
          { required: true, message: '请填写支付宝账号', trigger: 'blur' }
        ]
      },

      ruleForm: {
        id: '',
        bankCode: '', // 银行代码
        bankAccount: '', // 开户账号
        bankProvince: '', // 开户行省
        bankCity: '', // 开户行市
        bankSubname: '', // 开户支行
        bankPass: '' // 提现密码
      },
      ruleFormAli: {
        readlproveId: '',
        bankPass: '', // 提现密码
        alinum: '' // 支付宝账号
      }
    }
  },
  props: ['myInfo'],
  computed: {},

  mounted () {
    this.init()
  },
  methods: {
    async init () {
      if (this.provinceList.length <= 0 && localStorage.getItem('token')) {
        this.$apis
          .province({
            id: 0
          })
          .then(res => {
            this.provinceList = res.data.data.list
          })
        this.$apis.city().then(res => {
          this.cityListOld = res.data.data.list
        })
      }

      if (this.myInfo.isReal == 1) {
        await this.realproves()
        await this.withdrawList()
      }
    },
    bankName (e) {
      for (var i = 0; i < this.bankListL.length; i++) {
        if (e == this.bankListL[i].id) {
          return this.bankListL[i].name
        }
      }
    },
    bankCard () {
      if (this.myInfo.isReal != 1) {
        this.$confirm('请先实名, 是否实名?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$emit('setIndex', 5)
          })
          .catch(() => {})
      } else {
        this.dialogTableVisible = true
      }
    },
    bankCardAli () {
      if (this.myInfo.isReal != 1) {
        this.$confirm('请先实名, 是否实名?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$emit('setIndex', 5)
          })
          .catch(() => {})
      } else {
        this.isAliDialogTableVisible = true
      }
    },
    realproves () {
      // 获取实名信息详情

      return this.$apis.realproves().then(res => {
        this.realprovesName = res.data.data
        this.ruleFormAli.readlproveId = this.realprovesName.id
        this.ruleFormAli.alinum = this.realprovesName.aliName
        this.ruleFormAli.bankPass = this.realprovesName.bankPass

        this.ruleForm = this.realprovesName
        this.dialogTableVisible = false
        this.isAliDialogTableVisible = false
      })
    },
    withdrawList () {
      this.loading = true
      return this.$apis
        .withdrawList({
          limit: this.limit,
          page: this.page,
          status: this.withdrawStatus,
          typeId: this.realprovesName.adminId,
          withdrawType: 2
        })
        .then(res => {
          const e = res.data.data
          this.tableData = e.list
          this.total = e.total
          this.loading = false
        })
    },
    handlePublish () {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$apis.realUpdate(this.ruleForm).then(res => {
            if (res.data.errno == 0) {
              this.$notify.success({
                title: '成功',
                message: '操作成功'
              })
              this.realproves()
            } else {
              this.$notify.error({
                title: '错误',
                message: res.data.errmsg
              })
            }
            this.loading = false
          })
        } else {
          this.$message({
            message: '请检查数据必填项',
            type: 'warning'
          })
          return false
        }
      })
    },
    handleAliPublish () {
      this.$refs['ruleFormAli'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$apis.realUpdatealie(this.ruleFormAli).then(res => {
            if (res.data.errno == 0) {
              this.$notify.success({
                title: '成功',
                message: '操作成功'
              })
              this.realproves()
            } else {
              this.$notify.error({
                title: '错误',
                message: res.data.errmsg
              })
            }
            this.loading = false
          })
        } else {
          this.$message({
            message: '请检查数据必填项',
            type: 'warning'
          })
          return false
        }
      })
    },

    bindProvince (e) {
      // this.ruleForm.bankCity = ''
      this.cityListOld.map(item => {
        if (item.code == e) {
          this.cityList = item.children
          this.ruleForm.bankProvince = item.name
        }
      })
    },
    current_change (e) {
      this.page = e
      this.withdrawList()
    },
    size_change (e) {
      this.limit = e
      this.withdrawList()
    }
  }
}
</script>

<style lang="less" scoped>
.con-t-select {
  margin-top: 0px;
}
.content {
  display: flex;
  min-height: 100vh;
}
.myorderform {
  flex: 1;
  background-color: #fafafa;
}
.myset {
  text-align: center;
  padding: 70px 20px 50px;
  font-size: 16px;
  img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-bottom: 10px;
  }
  div {
    span {
      color: #d1483f;
    }
  }
}
.myorderform-title {
  font-size: 18px;
  margin-bottom: 30px;
  text-align: center;
}
.goodsbuy {
  padding: 15px 0px;
  color: #828282;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
}
.goodsbuyatv {
  border-left: 4px solid #d82141;
  background-color: #fff;
}
.orderform {
  background-color: #fff;
  padding: 60px 40px;
  flex: 4;
  box-sizing: border-box;
}
.allorders {
  display: flex;
  margin-bottom: 20px;
}
.cancellation-order {
  border-right: 2px solid #ddd;
  padding: 0px 30px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}
.cancellation-active {
  color: #d82141;
}
.cancellation-order:last-child {
  border: none;
}
.cancellation-order:first-child {
  padding-left: 0;
}
.uni-input {
  border: 1px solid #e4e4e4;
  width: 30%;
  border-radius: 10px;
  padding: 10px 0;
  padding-left: 20px;
  margin-bottom: 40px;
}
.indent-select {
  display: flex;
  .uni-data-select {
    margin-right: 10px;
  }
  img {
    width: 80px;
    height: 60px;
  }
}
.uni-stat__select {
  margin-right: 40px;
  margin-bottom: 40px;
}
.seedetails {
  color: #fff;
  background: linear-gradient(#d82141, #f36638);
}

.recharge-hd {
  border-left: 3px solid #d82141;
  padding: 2px 10px;
  margin-bottom: 30px;
}
.recharge-bd {
  width: 500px;
  margin-left: 150px;
}

.recharg-but {
  margin-left: 100px;
  margin-top: 20px;
}

.particulars {
  margin: 30px 0px;
  padding: 15px;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.particulars-item {
  display: flex;
  line-height: 30px;
  b {
    color: #444444;
    font-size: 14px;
    flex: 1;
  }
  span {
    color: #888888;
    font-size: 16px;
    flex: 3;
  }
}

.myInfo {
  margin-top: 10px;
  .icon {
    font-style: normal;
    color: #986e32;
    font-size: 12px;
    background: #ffe863;
    border: 1px #986e32 dashed;
    padding: 2px 3px;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
  }
}
.relbox {
  width: 600px;
}
.bankCard {
  position: relative;
  width: 350px;
  height: 200px;
  border: 1px #ddd dotted;
  cursor: pointer;
  text-align: center;
  margin-right: 45px;
  .bankbind {
    margin-top: 75px;
    color: #a3a3a3;
  }
  .bankCardInfo {
    padding-top: 40px;
    line-height: 35px;
    font-size: 16px;
    color: #8d8d8d;
  }
  .bankUp {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #8b8b8b94;
  }
}
.bankCard:hover {
  .bankUp {
    display: block;
  }
}
.indent {
  margin-top: 30px;
}
.relboxmain {
  display: flex;
  flex-wrap: wrap;
}
</style>